import {useState} from 'react';
import Taro,{useDidShow} from '@tarojs/taro';
import NavBar from '../../component/navbar';
import Styles from './index.module.less';
import {getGlobalData, Request} from '../../util';
export default function index(props){

    const domain = getGlobalData('domain');
    const openid = Taro.getStorageSync('openid');

    const [appointmentList, setAppointmentList] = useState([]);
    useDidShow(()=>{
        Request(domain+"/client/appointment/unfinishedAppointmentList",{openid:openid}).then((res)=>{
            setAppointmentList(Object.values(res.data.data));
        })
    })

    const handleNewTreatmentListBtn = () => {
        Taro.switchTab({
            url:"/pages/index/index"
        })
    }

    

    return (
        <view>
            <NavBar title="已预约疗程" backTo="prev"/>
            <view class={Styles.topAttached}>
                    <view class={Styles.header}>预约待服务</view>
                    <view class={Styles.content}>请及时到店，凭借预约信息享受服务</view>
            </view>

            {
                appointmentList && 
                <view class={Styles.appointmentList}>
                    {
                        appointmentList.map((item,key)=>{
                            return <view class={Styles.appointment_wrap}>
                                <view class={Styles.header}>预约信息</view>
                                <view class={Styles.info}>
                                        <view class={Styles.left_tip}>预约门店</view>
                                        <view class={Styles.right_content}>{item.store}</view>
                                </view>
                                <view class={Styles.info}>
                                        <view class={Styles.left_tip}>门店地址</view>
                                        <view class={Styles.right_content}>{item.address}</view>
                                </view>
                                <view class={Styles.info}>
                                        <view class={Styles.left_tip}>门店电话</view>
                                        <view class={Styles.right_content}>{item.phone}</view>
                                </view>
                                <view class={Styles.info}>
                                        <view class={Styles.left_tip}>预约疗程</view>
                                        <view class={Styles.right_content}>{item.treatment}</view>
                                </view>

                                <view class={Styles.info}>
                                        <view class={Styles.left_tip}>预约时间</view>
                                        <view class={Styles.right_content}>{item.date} {item.time}</view>
                                </view>
                                <view class={Styles.info}>
                                        <view class={Styles.left_tip}>备注</view>
                                        <view class={Styles.right_content}>{item.remark}</view>
                                </view>
                                
                            </view>
                        })
                    }
                </view>
            }

            { appointmentList.length == 0 &&
                <view class={Styles.tip}>
                    暂无预约
                </view>
            }

            { appointmentList.length == 0 &&
                <view class={Styles.newTreatmentListbtn_wrap}>
                    <view class={Styles.newTreatmentListbtn} onClick={handleNewTreatmentListBtn}>查看最新疗程</view>
                </view>
            }
        </view>
    )
}